<template>
<TabContainer  >
  <table style="width: 100%;height: fit-content;">
    <thead>
      <tr class="row">
        <th class="col-3">Stock Code</th>
        <th class="col-3">Serial No.</th>
        <th class="col-2">Latest <span class="upper">{{ props.name }}</span> Version</th>
        <th class="col-2">Current <span class="upper">{{ props.name }}</span> Version</th>
        <th class="col-2">Action</th>
      </tr>
    </thead>
    <hr />
    <tbody>
        <tr
          v-for="(item, index) in data"
          :key="index"
          class="cursor-pointer row items-center"
          :class="getClass(item)"
          style="text-align: center"
        >
          <td class="col-3">{{ item.stock_code }}</td>
          <td class="col-3">{{ item.serail_no }}</td>
          <td class="col-2">{{ getLatestVersion(item) }}</td>
          <td class="col-2">{{ getCurrentVersion(item) }}</td>
          <td class="col">
              <q-btn color="dark" dense flat icon="edit" label="OK" @click="openEditDiag(item.repair_order_part_version_id)" />
          </td>
        </tr>
      </tbody>
    </table>
    <q-dialog  v-model="editDiag" >
      <RepairOrderPartVersionForm
        :id = "editId"
        :mode="'edit'"
        :version="props.name"
        @submit="onSubmit"
        @close="onClose"/>
    </q-dialog>
  </TabContainer>

</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { getStatusColor } from 'src/utils/getPublic';
import TabContainer from '../container/TabContainer.vue';
import { CurrentLatestVersion } from 'src/services/type';
import { getAllVersion } from 'src/services/repairService';
import RepairOrderPartVersionForm from '../repairOrderPartVersion/RepairOrderPartVersionForm.vue';

const props = defineProps<{
  name: 'sw'|'hw';
  repairOrder:number;
}>();

const emit = defineEmits(['update'])

const editDiag = ref(false)
const editId = ref(0)
const data = ref<CurrentLatestVersion[]>([])
function getField(){
  return props.name === 'sw'?'sw_ver':'hw_ver'
}

function getClass(item:CurrentLatestVersion){
  const correct = getIsCorrect(item)
  return getStatusColor(correct?'correct':'danger')
}

function getIsCorrect(item:CurrentLatestVersion){
  const key = getField()+'_correct' as keyof CurrentLatestVersion
  return item[key]
}

function getCurrentVersion(item:CurrentLatestVersion){
  const key = 'current_'+getField() as keyof CurrentLatestVersion
  return item[key]
}

function getLatestVersion(item:CurrentLatestVersion){
  const key = 'latest_'+getField() as keyof CurrentLatestVersion
  return item[key]
}

async function initData(){  
  data.value = await getAllVersion(props.repairOrder)
}

function openEditDiag(id:number){
  editId.value = id
  editDiag.value = true
}

onMounted(()=>{
  initData()
})

function onSubmit(){
  initData().then(()=>emit('update'))
}

function onClose(){
  editDiag.value = false
}
</script>
<style scoped>
table {
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  padding: 0.5rem;
}

table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
}

/* upper case */
.upper{
  text-transform: uppercase;
}
</style>
